<template>
  <div class="main">
    <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
        style="font-weight: bold;">上海市崇明区教育系统在岗职工借用工作处理（本区信息库内人员工作借用） </span> </div>
    <div class="main-body">

      <div class="main-header float-left">
        <!-- <div class="d-flex"> -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
          <el-form-item label="单位：" v-if="schoolList.length > 0">
            <el-select v-model="formInline.gzXqdm" placeholder="请选择">
              <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC" :value="item.NEW_XQDM">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教职工名称">
            <el-input v-model="formInline.xm" placeholder="请输入教职工名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="adddiaodong" icon="el-icon-plus">新增教职工借用</el-button>
          </el-form-item>
        </el-form>
        <!-- </div> -->
      </div>

      <el-dialog title="教职工借用操作信息显示窗口" :visible.sync="dialogDetails" width="800px" :before-close="handleClose">
        <div style="text-align: center;display: ruby-text;margin-top: 20px;">
          <div style="width: 600px;height: 40px;background-color: bisque;line-height: 40px;">
            请下面输入请求调入教职工的关键信息后，点击“核查后调入”
          </div>

        </div>
        <div style="text-align: center;display: ruby-text;margin-top: 20px;">
          请选择调入教职工的身份证件类型:
          <el-select v-model="sfzlxval" placeholder="请选择" style="width: 300px;">
            <el-option v-for="(item, index) in sfzlxArr" :key="index" :label="item.mc" :value="item.dm">
            </el-option>
          </el-select>
        </div>

        <div style="text-align: center;display: ruby-text;margin-top: 20px;">
          请输入调入教职工的身份证件号码:
          <el-input v-model="sfzjh" placeholder="请输入证件号码" style="width: 300px;"></el-input>
        </div>
        <div style="text-align: center;display: ruby-text;margin-top: 20px;">
          <el-button type="primary" style="color: #fff;" @click="shenheSel">核查后新增</el-button>
        </div>

      </el-dialog>




      <el-dialog title="教职工借用操作信息显示窗口" :visible.sync="dialogDetails2" width="800px" :before-close="handleClose">
        <div>
          <div style="width:100%;">
            <table border='0' cellspacing="0" cellpadding="0"
              style="border-collapse:collapse;border-style:none;font-family:宋体;font-size:13px; width:100%; ">
              <tr>
                <td class="td1" style=" width:100px;">
                  身份证件类型
                </td>
                <td class="td1" style=" width:200px;">
                  <span>{{formatSfzjlx(faculty.SFZJLX)}}</span>
                </td>
                <td class="td1" style=" width:100px;">
                  身份证件号码
                </td>
                <td class="td1">
                  <span v-text="faculty.SFZJH"></span>
                </td>

              </tr>
              <tr>
                <td class="td1">
                  <span style="color: red;">*</span>姓名
                </td>
                <td class="td1">
                 <span v-text="faculty.XM"></span>
                </td>
                <td class="td1">
                  性别
                </td>
                <td class="td1">
                  <el-radio v-model="faculty.XBM" label="1">男</el-radio>
                  <el-radio v-model="faculty.XBM" label="2">女</el-radio>
                </td>
              </tr>
              <tr>
                <td class="td1">
                  国家地区
                </td>
                <td class="td1">
                  <span>{{formatGJDQ(faculty.GJDQ)}}</span>
                </td>
                <td class="td1">
                  民族
                </td>
                <td class="td1">
                  <span>{{formatMZ(faculty.MZ)}}</span>
                </td>
              </tr>
              <tr>
                <td class="td1">
                  政治面貌
                </td>
                <td class="td1">
                 <span>{{formatZZMM(faculty.ZZMM)}}</span>
                </td>
                <td class="td1">
                  出生年月
                </td>
                <td class="td1">
                  <span v-text="faculty.CSNY"></span>
                </td>
              </tr>
              <tr>
                <td class="td1">
                  所在校区
                </td>
                <td class="td1">
                  <span v-text="faculty.XQJC"></span>
                </td>
                <td class="td1">
                  现工作单位
                </td>
                <td class="td1">
                  <span v-text="faculty.XQMC"></span>
                </td>
              </tr>

              <tr>
                <td class="td1">
                  教职工编号
                </td>
                <td class="td1">
                  <span v-text="faculty.TeacherId"></span>
                </td>
                <td class="td1">
                  登记状态
                </td>
                <td colspan="2" class="td1">
                  <span v-text="faculty.MC"></span>
                </td>
              </tr>
              <tr>
                <td class="td1">
                  联系电话
                </td>
                <td class="td1">
                  <span v-text="faculty.LXDH"></span>
                </td>
                <td class="td1">
                  调入校区
                </td>
                <td class="td1">
                  <el-select v-model="gzxiaoqu" placeholder="请选择" @change="onChange2">
                  <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC" :value="item.NEW_XQDM">
                  </el-option>
                </el-select>
                </td>
              </tr>

            </table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogDetails2 = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit2">提 交</el-button>
        </span>
      </el-dialog>

      <div class="main-center float-left">
        <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
          :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
         
          <el-table-column prop="SQSJ" label="发起日期"></el-table-column>
          <el-table-column prop="XM" label="教职工姓名"></el-table-column>
          <el-table-column prop="deviceType" label="借用信息">
            <template slot-scope="scope">
             <div>
              <span v-text="scope.row.YXQJC" style="margin-right:20px;"></span>
              <i class="el-icon-caret-right" style="color:red;"></i>
              <span v-text="scope.row.HXQJC" style="margin-left:20px;"></span>
             </div>
            </template>
          </el-table-column>
          <el-table-column prop="FQR" label="发起人"></el-table-column>
          <el-table-column prop="LCZT" label="流程状态"></el-table-column>
          <el-table-column prop="SJJG" label="调动结果"></el-table-column>
          <el-table-column prop="SJR" label="审结人"></el-table-column>
        </el-table>

        <div class="footer-pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
            :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import httpdict from "../../api/dict";
import httplogin from "../../api/login";
export default {
  name: 'Social',
  data() {
    return {
      tableData: [{

      }],
      formInline: {
        benqu: "",
        gzXqdm: '',
        xm: '',
        ddl_xz: '',
        ddl_jdfs: '',
        currentPage: 1,
        limit: 10,
        total: 0
      },
      ddl_lb_list: [
        {
          value: 0,
          label: '本区编内'
        },
        {
          value: 1,
          label: '本区编外'
        },
      ],//类别 options
      ddl_bb_list: [],//办别 options
      ddl_xz_list: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '普通',
          label: '普通'
        },
        {
          value: '工读',
          label: '工读'
        },
        {
          value: '特教',
          label: '特教'
        },
      ],//性质 options
      ddl_jdfs_list: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '走读',
          label: '走读'
        },
        {
          value: '寄宿',
          label: '寄宿'
        },
      ],//就读方式 options
      dialogDetails: false,
      dialogDetails2: false,
      schoolList: [],
      sfzlxArr: [],
      sfzjh: "",
      sfzlxval: "1",
      JiaoZhiGongInfo:{},
      faculty:{},
      countryArr:[],
      mzArr:[],
      zzmmArr:[],
      gzxiaoqu:"3101517061"
    }
  },
  mounted() {
    this.moveFacultyListway();
    this.getschoolList()
  },
  methods: {
    async shenheSel() {
      var data = {
        sfzjh: this.sfzjh,
        sfzjlx: this.sfzlxval
      }
      var res = await httplogin.examineCard(data)
      console.log(res)
      if (res.data.code == 200) {
        this.dialogDetails = false
        if (res.data.data.examine) {
          this.getFacultyinitialway()
          this.dialogDetails2 =true
        }else{
          this.$alert("本区教职工信息库没有找到该职工信息", '提示', {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true,
            callback: action => {
              // this.$message({
              //   type: 'info',
              //   message: ``
              // });
            }
          });
        }
      }
     
    },
    async onSubmit2(){
      var data ={
        sfzjh: this.faculty.SFZJH,
	      sfzjlx:this.faculty.SFZJLX,
        gzXqdm:this.gzxiaoqu,
	      ydlx:"02"
      }
    var res = await  httplogin.moveFaculty(data);
    if(res.data.code==200){
      this.$message({
          type: 'success',
          message: res.data.msg
        });
      this.moveFacultyListway()
      this.dialogDetails2 = false
    }
    },
    
    async getFacultyinitialway() {
      var data = {
        sfzjh: this.sfzjh,
        sfzjlx: this.sfzlxval
      }
      var res = await httplogin.getFacultyinitial(data);
      if (res.data.code == 200) {
        this.faculty = res.data.data.faculty;
        console.log(this.faculty)
      }
       
    },
    formatSfzjlx(val){
     for (let i = 0; i < this.sfzlxArr.length; i++) {
           if(val== this.sfzlxArr[i].dm){
            return this.sfzlxArr[i].mc
           }
     }
    },
    formatGJDQ(val){
      for (let i = 0; i < this.countryArr.length; i++) {
           if(val== this.countryArr[i].dm){
            return this.countryArr[i].mc
           }
     }
    },

    formatMZ(val){
      for (let i = 0; i < this.mzArr.length; i++) {
           if(val== this.mzArr[i].dm){
            return this.mzArr[i].mc
           }
     }
    },
    formatZZMM(val){
      for (let i = 0; i < this.zzmmArr.length; i++) {
           if(val== this.zzmmArr[i].dm){
            return this.zzmmArr[i].mc
           }
     }
    },
    adddiaodong(){
      this.getshzjlxway();
      this.GetCountryway();
      this.GetMzway();
      this.GetZzmmway();
        this.dialogDetails = true
    },
    async getshzjlxway() {
      var res = await httpdict.getshzjlx();
      if (res.data.code == 200) {
        this.sfzlxArr = res.data.data.sfzlx;
      }
    },
    async GetCountryway() {
      var res = await httpdict.GetCountry();
      if (res.data.code == 200) {
        this.countryArr = res.data.data.sfzlx;
      }
    },
    async GetMzway() {
      var res = await httpdict.GetMz();
      if (res.data.code == 200) {
        this.mzArr = res.data.data.sfzlx;
      }
    },
    async GetZzmmway() {
      var res = await httpdict.GetZzmm();
      if (res.data.code == 200) {
        this.zzmmArr = res.data.data.sfzlx;
      }
    },
    async moveFacultyListway() {
      let data = {
        ydlx: "02",
        page: this.formInline.currentPage,
        size: this.formInline.limit,
        xm: this.formInline.xm
      }
      var res = await httplogin.moveFacultyList(data);
      if (res.data.code == 200) {
        this.tableData = res.data.data.list,
          this.formInline.total = res.data.data.total
      }
    },
    async getschoolList() {
      let res = await httplogin.getUserPermissionInfo();
      if (res.data.code == 200) {
        if (res.data.data.estate == "区级") {
          this.schoolList = res.data.data.UserPermission
          this.sortPingyinfun(this.schoolList)
        }
      }
    },
    sortPingyinfun(list) {
      list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
      return list
    },
    //点击查看详情 open 弹框
    handleClick(row) {
      console.log(row)
      this.dialogDetails = true
    },
    //close 弹框
    handleClose() {
      this.dialogDetails = false
    },
    onSubmit() {
      // console.log(this.formInline);
      this.moveFacultyListway()
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.moveFacultyListway()
    },
    handleCurrentChange(val) {
      this.formInline.currentPage = val
      this.moveFacultyListway()
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>
.td1 {
  border: 1px solid #8c8c8c;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #3c3c3c;
  padding: 3px;
  /* width: 40%; */
}

.inputbox {
  text-align: center;
  line-height: 25px;
  border: 1px solid #b3b3b3;
  font-size: 13px;
  height: 25px;
  width: 96%;
}

.rblList td {
  font-size: 13px;
  color: #3c3c3c;
  border-style: none;
  text-align: left;
  height: 30px;
  line-height: 30px;
}
::v-deep .el-dialog__header {
  background-color: #ff4d4f !important;
}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #fff !important;
  /* font-weight: 600; */
}
.main {
  width: 100%;
  float: left;
  height: auto;
  box-sizing: border-box;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  overflow-x: auto;
  overflow-y: auto;
}

.main-body {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 12px;
}

.float-left {
  width: 100%;
  height: auto;
  float: left;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.mr-24 {
  margin-right: 24px;
}

.fontcolor {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 14px;
  box-sizing: border-box;
}

.footer-pagination {
  padding: 10px 0 0 0;
  text-align: right;
}

.font-all {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
</style>